<template>
  <div>
    <div class="userlogin" @click="showPopup">
      <div class="avatar">
        <img :src="avatar" alt="" />
      </div>
      <div class="user_name">{{ nickname }}</div>
      <van-icon :name="iconSrc" color="#fff" @click="logOut"></van-icon>
    </div>

    <van-grid :column-num="3" square>
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="bill-o" text="优惠卷" />
      <van-grid-item icon="goods-collect-o" text="礼品卡" />
      <van-grid-item icon="location-o" text="我的收藏" />
      <van-grid-item icon="flag-o" text="我的足迹" />
      <van-grid-item icon="contact-o" text="会员福利" />
      <van-grid-item icon="aim" text="地址管理" />
      <van-grid-item icon="warn-o" text="账号安全" />
      <van-grid-item icon="service-o" text="联系客服" />
      <van-grid-item icon="question-o" text="帮助中心" />
      <van-grid-item icon="smile-comment-o" text="意见反馈" />
    </van-grid>

    <van-popup v-model="show">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            color="linear-gradient(to right, #ff6034, #ee0a24)"
            type="info"
            native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>

    <!-- 展示退出登录框 -->
    <van-dialog
      v-model="LogOutModal"
      title="退出登录"
      show-cancel-button
      @confirm="confirm"
    >
      <div style="text-align: center; padding: 0.2rem 0">确定要退出登录吗?</div>
    </van-dialog>
  </div>
</template>

<script>
import { LoginApi } from "../request/api.js";
import avatar from "../assets/img/logo.png";
export default {
  data() {
    return {
      //模态框显示状态
      show: false,
      //用户名
      username: "",
      // 密码
      password: "",
      //用户头像
      avatar,
      // 用户昵称
      nickname: "点击登录",
      //登录最右侧图标
      iconSrc: "arrow",
      //退出登录框状态
      LogOutModal: false,
    };
  },
  //刷新时的信息
  created() {
    let token = localStorage.getItem("token");
    if (token) {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.nickname = userInfo.nickname;
      this.avatar = userInfo.avatar;
      this.show = false;
      this.iconSrc = "cross";
    }
  },
  methods: {
    //退出登录
    logOut() {
      let token = localStorage.getItem("token");
      if (token) {
        this.LogOutModal = true;
      }
      return;
    },
    //点击确认删除
    confirm() {
      setTimeout(() => {
        this.$toast.success("退出成功");
        localStorage.removeItem("token");
        localStorage.removeItem("userInfo");
        this.avatar = avatar;
        this.show = false;
        this.iconSrc = "arrow";
        this.nickname = "用户登录";
      }, 1000);
    },
    //点击登录按钮
    onSubmit(values) {
      console.log("submit", values["用户名"]);
      console.log("submit", values["密码"]);
      console.log("submit", values);
      //发起登录请求
      LoginApi({
        //传入用户名
        username: values["用户名"],
        pwd: values["密码"],
      }).then((res) => {
        console.log(res);
        if (res.data.errno == 0) {
          // 1.提醒用户登陆成功
          this.$toast.success("登陆成功");
          //储存token
          localStorage.setItem("token", res.data.data.token);
          //储存用户名
          localStorage.setItem(
            "userInfo",
            JSON.stringify(res.data.data.userInfo)
          );
          //隐藏登录框
          this.show = false;
          // 获取用户信息
          let { avatar, nickname } = res.data.data.userInfo;
          this.avatar = avatar;
          this.nickname = nickname;
          this.iconSrc = "cross";
        }
      });
    },
    // 点击登录显示模态框
    showPopup() {
      let token = localStorage.getItem("token");
      if (token) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
  },
};
</script>
 
<style lang = "less" scoped>
.userlogin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 0.7.5rem;
  padding: 0.2rem 0.1rem;
  font-family: "宋体";
  /* box-sizing: border-box; */
  background-color: #333;
  text-align: left;
  .user_name {
    flex: 1;
    text-indent: 0.1rem;
    color: white;
  }
  .avatar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 0.7rem;
    /* height: ;: 1.1rem; */
    img {
      width: 100%;
      border-radius: 50%;
    }
  }
  .arrows {
    text-align: right;
    color: white;
  }
}
.van-popup {
  width: 90%;
}
.van-form {
  /* width: 90%;/ */
  background-color: #fff;
}
</style>